<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>响应式两栏布局</title>
   <style>
      /* 基本样式 */
      .container {
         display: flex;
         flex-wrap: wrap;
      }

      .left-column,
      .right-column {
         padding: 20px;
         box-sizing: border-box;
      }

      .left-column {
         background-color: lightblue;
      }

      .right-column {
         background-color: lightcoral;
      }

      /* 默认情况下，大屏幕显示两栏布局 */
      @media screen and (min-width: 768px) {
         .left-column {
            flex: 1;
            /* 左侧栏占据1份，即整个宽度的1/3 */
         }

         .right-column {
            flex: 2;
            /* 右侧栏占据2份，即整个宽度的2/3 */
         }
      }

      /* 当屏幕宽度小于768px时，显示一栏布局 */
      @media screen and (max-width: 767px) {

         .container {
            flex-direction: row;
         }
         .left-column,
         .right-column {
            width: 100%;
            box-sizing: border-box;
         }
      }
   </style>
</head>

<body>
   <div class="container">
      <div class="left-column">左侧内容</div>
      <div class="right-column">右侧内容</div>
   </div>
</body>

</html>